.link {
  @apply text-gray-700 hover:underline no-underline;
}

.btn {
  @apply font-normal text-base rounded cursor-pointer border border-transparent appearance-none inline-block select-none leading-normal antialiased align-baseline no-underline;

  padding: 0.35rem 0.75rem;
  transition: 0.15s ease;
}

.btn.btn-sm {
  @apply text-sm py-px px-2;
}

.btn.btn-lg {
  @apply text-lg py-2 px-6;
}

.btn.btn-xl {
  @apply text-xl py-3 px-8;
}

.btn.btn-expanded {
  @apply block w-full;
}

.btn.btn-round {
  @apply rounded-full;
}

.btn.btn-default {
  @apply bg-white border border-gray-400 text-gray-700 hover:border-gray-700 focus:border-gray-700;
}

.btn.btn-white {
  @apply bg-white text-gray-700 border-transparent border hover:bg-gray-200 hover:text-gray-800 focus:bg-gray-200 focus:text-gray-800;
}

.btn.btn-white.btn-outline {
  @apply border border-white bg-transparent text-white hover:bg-white hover:border-white hover:text-gray-800 focus:bg-white focus:border-white focus:text-gray-800;
}

.btn.btn-black {
  @apply bg-black text-white hover:bg-gray-900 focus:bg-gray-900;
}

.btn.btn-black.btn-outline {
  @apply bg-transparent text-black border border-black hover:bg-black hover:text-white focus:bg-black focus:text-white;
}

.btn.btn-gray {
  @apply bg-gray-300 text-gray-800 hover:bg-gray-400 focus:bg-gray-400;
}

.btn.btn-gray.btn-outline {
  @apply bg-transparent text-gray-800 border border-gray-400 hover:bg-gray-400 focus:bg-gray-400;
}

.btn.btn-red {
  @apply bg-red-600 text-white hover:bg-red-700 focus:bg-red-700;
}

.btn.btn-red.btn-outline {
  @apply bg-transparent text-red-600 border border-red-600 hover:bg-red-600 hover:text-white focus:bg-red-600 focus:text-white;
}

.btn.btn-yellow {
  @apply bg-yellow-300 text-black hover:bg-yellow-400 focus:bg-yellow-400;
}

.btn.btn-yellow.btn-outline {
  @apply bg-transparent text-yellow-400 border border-yellow-400 hover:bg-yellow-400 hover:text-white focus:bg-yellow-400 focus:text-white;
}

.btn.btn-green {
  @apply bg-green-600 text-white hover:bg-green-700 focus:bg-green-700;
}

.btn.btn-green.btn-outline {
  @apply bg-transparent text-green-600 border border-green-600 hover:bg-green-600 hover:text-white focus:bg-green-600 focus:text-white;
}

.btn.btn-blue {
  @apply bg-blue-600 text-white hover:bg-blue-700 focus:bg-blue-700;
}

.btn.btn-blue.btn-outline {
  @apply bg-transparent text-blue-600 border border-blue-600 hover:bg-blue-600 focus:bg-blue-600 hover:text-white focus:text-white;
}

.btn.btn-indigo {
  @apply bg-indigo-600 text-white hover:bg-indigo-700 focus:bg-indigo-700;
}

.btn.btn-indigo.btn-outline {
  @apply bg-transparent text-indigo-600 border border-indigo-600 hover:bg-indigo-600 hover:text-white focus:bg-indigo-600 focus:text-white;
}

.btn.btn-purple {
  @apply bg-purple-600 text-white hover:bg-purple-700 focus:bg-purple-700;
}

.btn.btn-purple.btn-outline {
  @apply bg-transparent text-purple-600 border border-purple-600 hover:bg-purple-600 focus:bg-purple-600 hover:text-white focus:text-white;
}

.btn.btn-pink {
  @apply bg-pink-600 text-white hover:bg-pink-700 focus:bg-pink-700;
}

.btn.btn-pink.btn-outline {
  @apply bg-transparent text-pink-600 border border-pink-600 hover:bg-pink-600 focus:bg-pink-600 hover:text-white focus:text-white;
}

.btn.btn-transparent {
  @apply text-gray-800 bg-transparent hover:bg-gray-200 focus:bg-gray-200;
}

.btn.btn-link {
  @apply text-blue-700 bg-transparent mx-2 cursor-pointer hover:text-blue-700 focus:text-blue-700;
}
